<!-- components/reconciliation/DifferencesTable.vue -->
<template>
  <el-table
    :data="data"
    v-loading="loading"
    class="differences-table"
    stripe
  >
    <!-- 订单信息 -->
    <el-table-column label="订单信息" min-width="180">
      <template #default="{ row }">
        <div class="order-info">
          <div class="order-id">{{ row.orderInfo.platformOrderId }}</div>
          <div class="customer-name">{{ row.orderInfo.customerName }}</div>
          <div class="order-amount">¥{{ row.orderInfo.orderAmount.toLocaleString() }}</div>
        </div>
      </template>
    </el-table-column>
    
    <!-- 银行流水 -->
    <el-table-column label="银行流水" min-width="180">
      <template #default="{ row }">
        <div class="transaction-info">
          <div class="transaction-id">{{ row.transactionInfo.transactionId }}</div>
          <div class="payer-name">{{ row.transactionInfo.payerName }}</div>
          <div class="transaction-amount">¥{{ row.transactionInfo.transactionAmount.toLocaleString() }}</div>
        </div>
      </template>
    </el-table-column>
    
    <!-- 差异类型 -->
    <el-table-column label="差异类型" width="120">
      <template #default="{ row }">
        <el-tag 
          v-if="row.differenceInfo?.differenceType === 'amount'"
          type="danger"
          size="small"
        >
          金额差异
        </el-tag>
        <el-tag 
          v-else-if="row.differenceInfo?.differenceType === 'date'"
          type="warning"
          size="small"
        >
          时间差异
        </el-tag>
        <el-tag 
          v-else-if="row.differenceInfo?.differenceType === 'name'"
          type="info"
          size="small"
        >
          名称差异
        </el-tag>
        <el-tag 
          v-else-if="row.differenceInfo?.differenceType === 'multiple'"
          type="danger"
          size="small"
          effect="dark"
        >
          多项差异
        </el-tag>
      </template>
    </el-table-column>
    
    <!-- 差异详情 -->
    <el-table-column label="差异详情" min-width="200">
      <template #default="{ row }">
        <div class="difference-details">
          <div v-if="row.differenceInfo?.amountDiff" class="detail-item">
            <span class="label">金额差:</span>
            <span class="value">¥{{ row.differenceInfo.amountDiff.toFixed(2) }}</span>
          </div>
          <div v-if="row.differenceInfo?.dateDiff" class="detail-item">
            <span class="label">时间差:</span>
            <span class="value">{{ row.differenceInfo.dateDiff }}天</span>
          </div>
          <div v-if="row.differenceInfo?.nameSimilarity < 100" class="detail-item">
            <span class="label">名称相似度:</span>
            <span class="value">{{ row.differenceInfo.nameSimilarity }}%</span>
          </div>
        </div>
      </template>
    </el-table-column>
    
    <!-- 置信度 -->
    <el-table-column prop="matchInfo.confidence" label="置信度" width="100">
      <template #default="{ row }">
        <ConfidenceIndicator 
          :confidence="row.matchInfo.confidence"
          :status="row.matchInfo.matchStatus"
        />
      </template>
    </el-table-column>
    
    <!-- 操作 -->
    <el-table-column label="操作" width="150" fixed="right">
      <template #default="{ row }">
        <div class="action-buttons">
          <el-button 
            type="primary" 
            link 
            :icon="Edit" 
            @click.stop="handleResolveDifference(row)"
          >
            解决差异
          </el-button>
          <el-button 
            type="success" 
            link 
            :icon="Check" 
            @click.stop="handleConfirmMatch(row)"
          >
            确认匹配
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { Edit, Check } from '@element-plus/icons-vue'
import type { ReconciliationResult } from '@/types/reconciliation'
import ConfidenceIndicator from './ConfidenceIndicator.vue'

const props = defineProps<{
  data: ReconciliationResult[]
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'resolve-difference', match: ReconciliationResult): void
  (e: 'confirm-match', match: ReconciliationResult): void
}>()

const handleResolveDifference = (match: ReconciliationResult) => {
  emit('resolve-difference', match)
}

const handleConfirmMatch = (match: ReconciliationResult) => {
  emit('confirm-match', match)
}
</script>

<style scoped>
.differences-table {
  width: 100%;
}

.order-info, .transaction-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.order-id, .transaction-id {
  font-weight: 600;
  color: var(--el-color-primary);
}

.customer-name, .payer-name {
  font-weight: 500;
}

.order-amount, .transaction-amount {
  font-weight: 600;
  color: var(--el-color-success);
}

.difference-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
}

.label {
  color: var(--el-text-color-secondary);
}

.value {
  font-weight: 500;
  margin-left: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}
</style>